<div class="content">
    <div id="example_title">
        <h1>Color Picker</h1>
        There is a color dialog that is part of w2ui.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<input id="color" style="width: 100px">
<div style="height: 20px"></div>
<input id="color2" style="font-size: 20px; width: 140px">
<div style="height: 20px"></div>
<input id="color3" style="font-size: 25px; width: 160px; height: 60px">
<div style="height: 20px"></div>

<style>
.w2ui-field input {
    width: 400px;
}
.w2ui-field > div > span {
    margin-left: 20px;
}
</style>

<!--CODE-->
<script type="module">
import { w2field, query } from '__W2UI_PATH__'

new w2field('color', { el: query('#color')[0] })
new w2field('color', { el: query('#color2')[0] })
new w2field('color', { el: query('#color3')[0] })

</script>